<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
		<!--<link rel="stylesheet" type="text/css" href="css/index-bigger.css"  media="screen and (min-device-width: 601px)" />
		<link rel="stylesheet" type="text/css" href="css/index-smaller.css" media="screen and (max-device-width: 600px)"/>-->
		<style type="text/css">
			body {
				/*height: 2000px;*/
				width: 100%;
				padding: 0;
				margin: 0 auto;
				text-align: center;
				transition: all 0.5s;
				background: #23b42b;
				
			}
			* {
				padding: 0;
				margin: 0;
				
			}
			img {
				width: 100%;
				
			}
			ul,
			ol {
				list-style: none;
			}
			div#first_box {
				width: 320px;
				/*height: 300px;*/
				margin: 0 auto;
				
			}
		
		/*此处摆放的是五个不断变化大小的爱心图片*/
		div#scale_img_div {
			width: 320px;
			margin: 0 auto;
		}	
		#scale_img {
			width: 100%;
			display: flex;
			justify-content: space-between;
			/*overflow: hidden;*/
			background: #fccdfc;
			
		}
		#scale_img > img {
			width: 20%;
			flex: 1;
			
			background: #FCCDFC;
		}
		.scale_imgs {
			position: relative;
			z-index: 1000;
			animation: scale 4s linear 0s 1;
			transition: all 0.5s;
		}
		@keyframes scale {
			0% { transform: scale(1) translate(0px, -50px);transition: all 0.5s;}
			50% { transform: scale(2) translate(0px, -25px);}
			/*25% { transform: scale(1.5) translateZ(30px);}
			
			75% { transform: scale(1.5) translateZ(10px);}*/
			100% { transform: scale(1) translate(0px, 0px);transition: all 0.5s;}
		}
			
			/*靠近窗口顶部的轮播图大盒子*/
	div#img {
		text-align: left;
		margin: 0px auto;
		width: 320px;
		height: 500px;
		line-height: 30px;
		/*border: 1px solid red;*/
		position: relative;
		top: 0px;
		
	}
	
	#img img {
		width: 320px;
		height: 224px;
		overflow: hidden;
	}
	div#img h3 {
		text-align: center;
		margin-top: 10px;
	}
	/*当鼠标进入轮播图区域时,左右转换箭头 button 就显示出来*/
	div#img:hover button {
		transition: all 0.4s;
		opacity: 1;
		
	}
	/*靠近窗口顶部的轮播图大盒子里的第一个装有图片的li元素的ul列表*/
	ul#ul_lis {
		/*position: relative;*/
		margin: 0;
		width: 100%;
		
	}
	
	ul#ul_lis li {
		transition: all 0.3s;
		width: 100%;
		height: 100%;
		background: white;
		position: absolute;
		z-index: 100;
	}
	/*靠近窗口顶部的轮播图大盒子里的第一个装有图片的li元素的ul列表的图片*/
	ul#ul_lis li img {
		width: 100%;
		
	}
	ul#ul_lis > li div {
		padding: 0 10px;
	}
	/*靠近窗口顶部的轮播图大盒子里的两个左右切换按钮 button，先让它看不见，等鼠标进入轮播图区域时就显示出来*/
	/*div#img button {
		display: none;
		width: 40px;
		height: 60px;
		line-height: 60px;
		position: absolute;
		top: 180px;
		font-size: 3em;
		border: none;
		background: aquamarine;
		outline: none;
		z-index: 101;
		cursor: pointer;
		transition: all 0.4s;
		opacity: 0;
	}
	div#img button:first-of-type {
		left: 35%;
	}
	div#img button:last-of-type {
		right: 35%;
	}*/
	
	/*.appear {
		
		z-index: 100;
		transition: all 0.5s;
		
		opacity: 1;
	}*/
	/*靠近窗口顶部的轮播图大盒子里图片ul列表的装有图片的li的轮播需要用到的类名*/
	.disappear {
		z-index: 99;
		transition: all 0.7s;
		opacity: 0;
	}
	
	ol#circles {
		/*position: absolute;*/
		position: absolute;
		top: 500px;
		
		z-index: 101;
		/*top: 430px;*/
		/*left: 25%;*/
		width: 300px;
		height: 160px;
		margin-left: 10%;
		text-align: center;
		list-style-type: none;
		
		
	}
	/*靠近窗口顶部的轮播图大盒子里的第二个列表，而且是有序列表 ol*/
	ol#circles li {
		margin-right: 15px;
		margin-top: 15px;
		/*margin: 10px;*/
		width: 40px;
		height: 40px;
		border-radius: 50%;
		transition: all 0.4s;
		float: left;
		font-size: 1.5em;
		line-height: 40px;
		cursor: pointer;
	}
	/*靠近窗口顶部的轮播图大盒子里图片；轮播需要用到的类名*/
	.circles_lis {
		background: pink;
		transition: all 0.4s;
	}
	/*靠近窗口顶部的轮播图大盒子里图片；轮播时下面的序号的li需要用到的类名*/
	.lis {
		background: aqua;
		transition: all 0.4s;
		transform: scale(1.5);
		
	}
		</style>
	</head>
	<body>
		
		<div id="first_box"><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=262655764,2952296771&fm=26&gp=0.jpg"/></div>
		
		<div id="scale_img_div">
			<ul>
				<li id="scale_img">
					<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3609857059,2625478161&fm=26&gp=0.jpg" alt="" />
					<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1838961959,2973910089&fm=26&gp=0.jpg" alt="" />
					<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3755288137,4276918902&fm=26&gp=0.jpg" alt="" />
					<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=21857747,1931004882&fm=26&gp=0.jpg" alt="" />
					
					<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2821722179,3979518401&fm=26&gp=0.jpg" alt="" />
				</li>
			</ul>
		</div>
			<!--以下为轮播图的大盒子部分-->
		<div id="out_div">
		
			<div id="img">
				
				<ul id="ul_lis">
					<li class="appear">
						<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1453503241,3442417185&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆高兴开心的时候</mark></h3>
							和迪雅一起享受那些快乐，一起说说笑笑。
						</div>
					</li>
					<li>
						<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2449974113,4267819779&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆不开心的时候</mark></h3>
							陪她，（可以自己编故事）哄她，一起说说话，陪老婆出去散心，放松心情，转移注意力。
							
						</div>
					</li>
					<li>
						<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3342057560,3462962874&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆在家做饭的时候</mark></h3>
							1. 自己在家，就和老婆一起弄菜，煮饭，珍惜每一个和老婆在一起的时刻，好好陪伴老婆。
							<br />
							2. 早点回家和老婆开开心心，一起吃饭，享受家里有家人和老婆的温暖与团聚。
						</div>
					</li>
					<li>
						<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3083177431,872953533&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆还没吃饭时</mark></h3>
							1.自己在家，做饭给老婆吃；如果老婆没胃口，或者自己做饭不太好吃，那就去买老婆喜欢吃的食物（除了奶茶，冰激凌等不健康、容易让人长胖的垃圾食品），要买健康营养的食物，养护老婆的身体。
							<br />
							2. 买热的餐食亲自送到老婆手里。
						</div>
					</li>
					<li>
						<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2719667758,517882943&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆做家务：扫地、洗衣服时</mark></h3>
							自己空闲就赶紧去帮忙，一起扫地、洗衣服，做家务等；不能让老婆做家务太累；做完家务的晚上好好在床上拥抱老婆，亲吻她，爱护她，疼她，这是作为一个老公应该做的对老婆的感激。
							
						</div>
					</li>
					<li>
						<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=836409728,2816721640&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>和老婆一起逛街，外出</mark></h3>
							走在路上时：<br />
							1. 紧紧牵着老婆的手，边走边小幅度摇摆我们的手，彼此感受这美好的心灵感应和甜蜜的陪伴爱情。
							<br />
							2. 老婆走路累了时，主动背起老婆走，用实际行动好好呵护我的老婆。
						</div>
					</li>
					
					<li>
						<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3451800849,296753060&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆处于大姨妈发生时期时</mark></h3>
							1. 有意识地提前准备好相关的牌子的卫生巾。
							<br />
							2. 帮忙买合适的卫生巾，呵护老婆身体，让老婆舒服，从每个小细节做起！！！
							
						</div>
					</li>
					<li>
						<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3860656017,3392567235&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆怀孕要做产检时</mark></h3>
							1. 作为老公，自学一些母婴知识，为了更好地呵护老婆。
							<br />
							2. 抽时间和老婆一起去医院检查，不能坐在椅子上玩手机；可以帮老婆排队、挂号、拿包包、买热的餐食。
							<br />
							3. 老婆站着也不能站太久，把自己的肩膀给老婆依靠，分担苦累。
						</div>
					</li>
					<li>
						<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2172316855,4171574822&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆抱着孩子时</mark></h3>
							替老婆抱抱孩子，让老婆休息一会儿。
						</div>
					</li>
					<li>
						<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2152536468,2855698807&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆因为孩子哭闹而难受时</mark></h3>
							安慰老婆，分担任务一起照顾孩子。
						</div>
					</li>
					<li>
						<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2434117489,2523825254&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆在工作感觉眼睛、头部、胃等身体上的不舒服时</mark></h3>
							
							1. 赶紧询问老婆，帮老婆捶捶背，揉揉肩，用自己的手帮老婆做眼保健操，好好放松，或者外出透气散心，不能让老婆在不舒服时承担太多的痛苦。
							<br />
							2. 不在身边时就打电话和老婆通话，劝说老婆去询问相关问题，防微杜渐。
							
						</div>
					</li>
					<li>
						<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=139442119,1448431711&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆一个人外出买东西时</mark></h3>
							赶紧去替代老婆买东西，让老婆好好休息好 / 或者牵着老婆的手慢慢走路去买东西。
							
						</div>
					</li>
					<li>
						<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3657222282,691461842&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆晚上失眠时</mark></h3>
							陪老婆说一会话，互相入睡。
						</div>
					</li>
					<li>
						<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2934542927,3450677353&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>老婆睡前躺在床上时</mark></h3>
							赶紧进被窝，抱住老婆，我们互相头依靠头，温柔亲吻老婆，享受温馨甜蜜，和老婆一起聊聊天，回忆一些往事，增进感情，疼爱老婆，不忘初心。
							
						</div>
					</li>
					<li>
						<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2250865770,1488174435&fm=26&gp=0.jpg" alt="" />
						<div>
							<h3><mark>在下雨天时</mark></h3>
							早上和老婆一起睡床上，晚点起床，互相拥抱着，和老婆安安静静地享受美好的二人世界；还有别忘了亲吻老婆。
						</div>
					</li>
					
				</ul>
				
				
				
				
				
				<!--下面是关于轮播图区域的淡入淡出效果的盒子-->
				<button id="prev"> < </button>
				<button id="next"> > </button>
				
				<ol id="circles">
					
				</ol>
				
			</div>
			<!--<input style="position: absolute;left: 0px;" type="color" name="body" id="body_color" value="skyblue" />-->
			<script type="text/javascript">
				/*let str1 = "123";
				let str2 = 123;
				console.log("用==号时比较结果为："+(str1 == str2));
				console.log("用===号时比较结果为："+(str1 === str2));*/
				
				
				let scale_imgs = document.querySelectorAll("#scale_img > img");
				let s_length = scale_imgs.length;
				let imgs_order = 0;
				setInterval( function() {
					
					for(let i = 0; i < s_length; i++) {
						scale_imgs[i].className = "";
					}
					scale_imgs[imgs_order].className = "scale_imgs";
					imgs_order ++;
					if(imgs_order >= s_length) {
						imgs_order = 0;
					}
					
				}, 4300);
				let bg_color = ["#db71d9", "#fccdfc", "#bbffff"];
				let num;
				setInterval(function() {
					num = Math.ceil(Math.random()*bg_color.length) - 1;
					document.body.style.background = bg_color[num];
				}, 2300);
				
				/*let color = document.getElementById("body_color");
				color.addEventListener("change", function() {
					document.body.style.background = this.value;
					
				});*/
				var ul_lis = document.getElementById("ul_lis").querySelectorAll("li");
				var i = 0;
				var prev = document.getElementById("prev");
				var next = document.getElementById("next");
				var circles = document.getElementById("circles");
				
				//定义创造的li元素为变量 circles_li代替
				var circles_li;
				
				for(var j = 0; j < ul_lis.length; j++) {
					circles_li = document.createElement("li");
					circles_li.className = "circles_lis";
					circles_li.innerHTML = (j+1);
					circles_li.value = j;
					circles.appendChild(circles_li);
				}
				//下面获得创造生成的li 序号元素
				var circles_lis = document.querySelector("#circles").querySelectorAll("li");
				
				//这是装有图片的li元素的变化,缺少setInterval函数的使用
				function appear_img() {
					if(i <= (ul_lis.length - 1) && i >= 0) {
						for (var j = 0; j < ul_lis.length; j++) {
							ul_lis[j].className = "disappear";
							circles_lis[j].className = "circles_lis";
							
						}
						ul_lis[i].className = "";
						circles_lis[i].className = "lis";
						
						i++;
					} else {
						i = 0;
						for (var j = 0; j < ul_lis.length; j++) {
							ul_lis[j].className = "disappear";
							circles_lis[j].className = "circles_lis";
							
						}
						ul_lis[i].className = "";
						circles_lis[i].className = "lis";
					}
					
				}
				var go = setInterval(appear_img, 4000);
				
				//鼠标悬浮在最顶部的大盒子上时就停止setInterval函数
				document.getElementById("img").addEventListener("mouseover", function() {
					clearInterval(go);
					go = null;
				})
				document.getElementById("img").addEventListener("mouseleave", function() {
					
					go = setInterval(appear_img, 4000);
				})
				
				//点击左右按钮时进行相应的装有图片的li元素的转换，这个是 左按钮
				prev.addEventListener("click", function() {
					if(i == 0) {
						i = ul_lis.length - 1;
						
						
					} else {
						i--;
						
					}
					for (var j = 0; j < ul_lis.length; j++) {
						ul_lis[j].className = "disappear";
						circles_lis[j].className = "circles_lis";
							
					}
					ul_lis[i].className = "";
					circles_lis[i].className = "lis";
					
				})
				//点击左右按钮时进行相应的装有图片的li元素的转换，这个是 右按钮
				next.addEventListener("click", function() {
					if(i == (ul_lis.length - 1)) {
						i = 0;
						
					} else {
						i++;
					}
					for (var j = 0; j < ul_lis.length; j++) {
						ul_lis[j].className = "disappear";
						circles_lis[j].className = "circles_lis";
							
					}
					ul_lis[i].className = "";
					circles_lis[i].className = "lis";
					
				})
				
				//接下来我还要实现点击相应的li序号时也能进行装有图片的li元素的转换
				//因为在第180行已经获得生成的序号li元素，为 var circles_lis = document.querySelector("#circles").querySelectorAll("li");
				for(var j = 0; j < ul_lis.length; j++) {
					circles_lis[j].addEventListener("click", function() {
						for(var j = 0; j < ul_lis.length; j++) { 
							circles_lis[j].className = "circles_lis";
						}
						this.className = "lis";
						
						i = this.value;
						
						for (var j = 0; j < ul_lis.length; j++) {
							ul_lis[j].className = "disappear";
							//circles_lis[j].className = "circles_lis";
							
						}
						ul_lis[i].className = "";
						//circles_lis[i].className = "lis";
						
						
					});
					
				}
				//以下是设定各图片的title属性值和alt属性值
				let all_imgs = document.getElementsByTagName("img");
				let all_imgs_length = all_imgs.length;
				let imgs_title = ["老婆，好想你~(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤~", "老婆，爱你很开心~(*^▽^*)~", "老婆，想你很幸福~o(*￣▽￣*)o~", "有老婆的陪伴，真好~o(^▽^)o~", "作为老公，我一定会好好爱老婆~(p≧w≦q)~"];
				let title_num = 0;
				for(let i = 0; i < all_imgs_length; i++) {
					setInterval(function() {
						title_num = Math.ceil(Math.random()*imgs_title.length) - 1;
						all_imgs[i].addEventListener("mouseover", function() {
							this.title = imgs_title[title_num];
							
						});
						all_imgs[i].setAttribute("alt",imgs_title[title_num]);
					},1000);
					
				}
				
				
			</script>
		
		</div>
			
		
	</body>
</html>
